<template>
  <div style="width: 100%;height: 90%"><!--全部设备-->
    <div class="screen" style="width: 100%;height: 100%;display: grid;grid-template-columns: repeat(3, 1fr)">
      <div style="width: 95%;height: 50vh;margin: 1vh auto 1vh auto" v-for="item in deviceList"><!--设备列表-->
        <div style="width: 100%;height: 10%;font-size: 1rem;color: rgba(94, 104, 162, 1);background-image: url('/dev-api/profile/background/编组 26.png');background-size: 100% 100%;background-repeat: no-repeat;display: flex">
          <div style="width: 5%;margin: auto"/>
          <div style="width: 95%;margin: auto;display: flex">
            <div style="width: 25%;margin: auto">姓名：{{item.name}}</div>
            <div style="width: 25%;margin: auto"></div>
            <div style="width: 25%;font-size: 0.8rem;margin: auto">年龄：{{item.age}}</div>
            <div style="width: 25%;font-size: 0.8rem;margin: auto">设备：{{item.type}}</div>
          </div>
        </div>

        <dv-border-box-7 style="width: 100%;height: 90%">
          <div class="screen1" style="width: 50%;height: 100%;float: left"/>

          <div style="width: 50%;height: 100%;float: left">
            <div class="screen2" style="width: 100%;height: 50%"/>

            <div class="screen3" style="width: 100%;height: 50%"/>
          </div>
        </dv-border-box-7>
      </div><!--设备列表-->
    </div>
  </div><!--全部设备-->
</template>

<script>
import dataV from '@jiaminghi/data-view'
import * as echarts from "echarts";
import Vue from "vue";

Vue.use(dataV)

export default {
  name: "Eggdevice",
  data() {
    return {
      deviceList: [
        {
          name: 'name1',
          age: 80,
          type: '心电设备',
          option1: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option2: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option3: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
        },
        {
          name: 'name1',
          age: 80,
          type: '心电设备',
          option1: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option2: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option3: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
        },
        {
          name: 'name1',
          age: 80,
          type: '心电设备',
          option1: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option2: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option3: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
        },
        {
          name: 'name1',
          age: 80,
          type: '心电设备',
          option1: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option2: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option3: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
        },
        {
          name: 'name1',
          age: 80,
          type: '心电设备',
          option1: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option2: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option3: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
        },
        {
          name: 'name1',
          age: 80,
          type: '心电设备',
          option1: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option2: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option3: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
        },
        {
          name: 'name1',
          age: 80,
          type: '心电设备',
          option1: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option2: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option3: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
        },
      ]
    };
  },
  mounted() {
    let charts1 = document.getElementsByClassName('screen1');
    let charts2 = document.getElementsByClassName('screen2');
    let charts3 = document.getElementsByClassName('screen3');
    for (let i = 0; i < this.deviceList.length; i++) {
      if (charts1[i] != null) {
        let myEcharts1 = echarts.init(charts1[i]);
        myEcharts1.setOption(this.deviceList[i].option1);
      }

      if (charts2[i] != null) {
        let myEcharts2 = echarts.init(charts2[i]);
        myEcharts2.setOption(this.deviceList[i].option2);
      }

      if (charts3[i] != null) {
        let myEcharts3 = echarts.init(charts3[i]);
        myEcharts3.setOption(this.deviceList[i].option3);
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.screen {
  overflow: auto;
}
.screen::-webkit-scrollbar {
  display: none;
}
</style>
